import React, { useState, useEffect } from "react";
import { Table, Input, Button, Space, Tooltip, Select } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { SUBSIDY_API } from "../../../api/config";
import axios from "axios";
const { Search } = Input;
const { Option } = Select;

// 新增一个状态来存储总数
// 修改组件名
const FlexEmployment = () => {
  // 模拟数据
  const [dataSource, setDataSource] = useState([]);
  // 搜索关键词
  const [searchTerm, setSearchTerm] = useState("");
  // 当前页码，对应后端的 page
  const [page, setPage] = useState(1);
  // 每页条数，对应后端的 per_page
  const [perPage, setPerPage] = useState(10);
  // 存储总数
  const [total, setTotal] = useState(0);
  // 新增状态来存储多选下拉菜单选中的值
  const [searchFields, setSearchFields] = useState([]);

  // 模拟从后端获取数据
  // 导入 axios 用于发送 HTTP 请求
  // 定义请求方法，添加搜索参数
  const fetchElderlySubsidy = async () => {
    try {
      const params = {
        page: page,
        per_page: perPage,
        search_term: searchTerm,
        // 如果没有选择搜索字段，则不传该参数
        ...(searchFields.length > 0 && { search_fields: searchFields.join(',') })
      };
      const response = await axios.get(
        SUBSIDY_API.FLEX_EMPLOYMENT.LIST,
        { params }
      );
      // 根据接口返回改造，从 res.data.data 中获取数据
      console.log("获取移民补贴数据:", response.data.data);
      setDataSource(response.data.data.data);
      // 设置总数
      setTotal(response.data.data.total);
    } catch (error) {
      console.error("获取移民补贴数据失败:", error);
    }
  };

  // 使用 useEffect 来在组件挂载时调用请求方法
  useEffect(() => {
    fetchElderlySubsidy();
  }, [searchTerm, page, perPage, searchFields]); // 当搜索词、页码、每页条数或搜索字段变化时重新请求数据

  // 搜索处理函数，调用接口查询
  const handleSearch = (value) => {
    setSearchTerm(value);
    setPage(1); // 搜索后回到第一页
    fetchElderlySubsidy();
  };

  // 根据给定配置修改表格列配置，添加 ellipsis 和 Tooltip 实现省略和悬停显示
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
      width: 100,
      render: (text, record, index) => {
        const currentNumber = index + 1;
        return <Tooltip title={currentNumber}>{currentNumber}</Tooltip>;
      },
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      width: 100,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '身份证号码',
      dataIndex: 'id_card',
      key: 'id_card',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '户口所在地',
      dataIndex: 'permanent_residence',
      key: 'permanent_residence',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '就业援助对象类别',
      dataIndex: 'employment_category',
      key: 'employment_category',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '灵活就业形式',
      dataIndex: 'employment_type',
      key: 'employment_type',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '初次享受时间',
      dataIndex: 'first_time',
      key: 'first_time',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '已享受总月数',
      dataIndex: 'month_total',
      key: 'month_total',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '本年度养老实际缴费金额',
      dataIndex: 'pension_payment_amount',
      key: 'pension_payment_amount',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '本年度医疗实际缴费金额',
      dataIndex: 'medical_payment_amount',
      key: 'medical_payment_amount',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '本次补贴金额合计（元）',
      dataIndex: 'total_amount',
      key: 'total_amount',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '本人农业银行卡号',
      dataIndex: 'bank_card',
      key: 'bank_card',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '开户行',
      dataIndex: 'bank_name',
      key: 'bank_name',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '补贴项目',
      dataIndex: 'subsidy_project',
      key: 'subsidy_project',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '是否代领',
      dataIndex: 'others_receive',
      key: 'others_receive',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '实际支付金额',
      dataIndex: 'actual_payment_amount',
      key: 'actual_payment_amount',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '实际支付时间',
      dataIndex: 'actual_payment_time',
      key: 'actual_payment_time',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '记录年份',
      dataIndex: 'record_year',
      key: 'record_year',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '记录批次',
      dataIndex: 'record_batch',
      key: 'record_batch',
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
  ];

  // 生成多选下拉菜单的选项
  const selectOptions = columns.map((column) => (
    <Option key={column.dataIndex} value={column.dataIndex}>
      {column.title}
    </Option>
  ));

  // 分页配置
  const pagination = {
    current: page,
    pageSize: perPage,
    // 使用新的总数状态
    total: total,
    onChange: (newPage, newPerPage) => {
      setPage(newPage);
      setPerPage(newPerPage);
    },
  };

  return (
    <div>
      <Space>
        <Select
          mode="multiple"
          style={{ width: 200 }}
          placeholder="请选择搜索字段"
          onChange={(value) => setSearchFields(value)}
        >
          {selectOptions}
        </Select>
        <Search
          placeholder="输入姓名、身份证或补贴月份等搜索"
          onSearch={handleSearch}
          enterButton={<Button icon={<SearchOutlined />}>搜索</Button>}
          style={{ width: 300 }}
          // 添加清除按钮
          allowClear
        />
      </Space>
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={pagination}
        // 添加横向滚动条，根据新列数调整宽度
        scroll={{ x: 3000 }}
      />
    </div>
  );
};

export default FlexEmployment;
